<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"/>
    <link href="${themePath}/css/element-ui-2.3.7.css" rel="stylesheet">
    <link rel="stylesheet" href="${themePath}/css/mint-ui.css">
    <link rel="stylesheet" href="${themePath}/css/phone.css" type="text/css"/>
    <link rel="stylesheet" href="${themePath}/css/PersonalCenter.css" type="text/css"/>
    <link href="${themePath}/css/iview-2.14.0.css" rel="stylesheet">
    <link rel="stylesheet" href="${themePath}/css/pc.css" type="text/css"/>
    <link rel="stylesheet" href="${themePath}/css/weui.min.css" type="text/css"/>
    <link rel="stylesheet" href="${themePath}/css/jquery-weui.min.css" type="text/css"/>
    <script src="${themePath}/js/jquery.min-3.3.1.js"></script>
    <script src="${themePath}/js/vue-2.5.17.js"></script>
    <script src="${themePath}/js/vuex-3.0.1.js"></script>
    <script src="${themePath}/js/iview-2.14.0.js"></script>
    <script src="${themePath}/js/element-ui-2.4.0.js"></script>
    <script src="${themePath}/js/mint-ui-2.2.13.js"></script>
    <script src='${themePath}/js/jquery-weui.min.js'></script>
    <title>个人中心</title>
</head>
<style>
    .aui-order-box {
        margin-bottom: 10px;
        border-radius: 2px;
        background: #ffffff;
        padding: 15px 15px 10px 15px;
        box-shadow: 0 1px 16px 0 rgba(0, 0, 0, .1);
    }

    .aui-order-fl {
        color: #666666;
        font-size: 1rem;
        margin-bottom: 5px;
        position: relative;
        overflow: hidden;
        padding-left: 15px;
    }

    .aui-order-time:before {
        content: " ";
        display: inline-block;
        height: 13px;
        width: 13px;
        position: absolute;
        left: 0;
        top: 2px;
        background-size: 13px;
    }

    .aui-order-address:before {
        content: " ";
        display: inline-block;
        height: 8px;
        width: 8px;
        position: absolute;
        left: 2px;
        top: 5px;
        background: #44bea3;
        border-radius: 100%;
    }

    .aui-order-door:before {
        content: " ";
        display: inline-block;
        height: 8px;
        width: 8px;
        position: absolute;
        left: 2px;
        top: 5px;
        background: #fc9153;
        border-radius: 100%;
    }

    .el-checkbox + .el-checkbox {
        margin-left: 0px;
    }

    .right {
        float: right;
        text-align: center;
        line-height: 30px;
        margin-top: 5px;
        margin-right: 10px;
        font-weight: bolder;
    }

    [v-cloak] {
        display: none;

    }
</style>

<body style="background: #F5F5F5;position: static;margin: 0 auto;">
<div id="app" v-cloak>
    <div class="home_top">
        <Row>
            <i-col span="8">
                <div class="left" @click="home">&#160
                    <Icon type="chevron-left"></Icon>
                    主页
                </div>
            </i-col>
            <i-col span="8">
                <div class="center">
                    <img src='${themePath}/images/logo.png' style="height: 20px;width: 20px;"/> 个人中心
                </div>
            </i-col>
            <i-col span="8">
                <div class="right" type="text" @click="exit">
                    退出
                </div>
            </i-col>
        </Row>
    </div>
    <div style="height:50px"></div>

    <el-tabs type="border-card">
        <el-tab-pane label="订单信息">
            <el-row>
                <el-col :span="24" v-for="(data, index) in salesVoucherList" :offset="index > 0 ? 2 : 0">
                    <div class="Order_box">
                        <el-row>
                            <el-col :span="12">
                                <h3 class="left">{{data.ticketAreaCode}}</h3>
                            </el-col>
                            <el-col :span="12">
                                <h3 class="right" v-if="data.salesVoucher.orderStatus==1"><span
                                        style="color:green">待付款</span></h3>
                                <h3 class="right" v-else-if="data.salesVoucher.orderStatus==2"><span
                                        style="color:green">已付款</span></h3>
                                <h3 class="right" v-else-if="data.salesVoucher.orderStatus==3"><span
                                        style="color:green">已出票</span></h3>
                                <h3 class="right" v-else-if="data.salesVoucher.orderStatus==4"><span
                                        style="color:green">交易完成</span></h3>
                                <h3 class="right" v-else-if="data.salesVoucher.orderStatus==5"><span
                                        style="color:green">交易全部取消</span></h3>
                                <h3 class="right" v-else-if="data.salesVoucher.orderStatus==6"><span
                                        style="color:green">已结算</span></h3>
                                <h3 class="right" v-else><span style="color:green">退订等待审核</span></h3>
                            </el-col>
                        </el-row>

                        <div class="bottom clearfix">
                            <time class="time">订单单号:</time>
                            <span class="button"><span
                                    style="color:green">{{data.salesVoucher.baseOrderNo}}</span></span>
                        </div>
                        <div class="bottom clearfix">
                            <time class="time">预定时间:</time>
                            <span class="button"><span
                                    style="color:green">{{data.salesVoucher.voucherDate}}</span></span>
                        </div>
                        <div class="bottom clearfix">
                            <time class="time">有效截止时间:</time>
                            <span class="button"><span
                                    style="color:green">{{data.svdList[0].endPassTime}}</span></span>
                        </div>
                        <div class="bottom clearfix">
                            <time class="time">订单明细:</time>
                            <span class="button">付款金额:<span style="color:red">{{data.salesVoucher.payAmount}}</span>元&nbsp;&nbsp;|&nbsp;&nbsp;预定数量:{{data.salesVoucher.orderPersonNum}}张</span>
                        </div>
                        <div class="bottom clearfix"
                             style="margin-top: 0px;padding: 10px;border-bottom: 1px solid #dcd9">
                            <p>
                                <el-checkbox-group v-model="checkList[index]" v-for="(svd, value) in data.svdList">
                                    <el-checkbox :label="svd.id" disabled v-if="svd.subOrderStatus==1">
                                        {{svd.ticketId}} | ￥<span style="color:red">{{svd.ticketSettlePrice}}</span> |
                                        {{svd.playerName}} |
                                        {{svd.dealNum}}票 | 待付款
                                    </el-checkbox>
                                    <el-checkbox :label="svd.id" v-else-if="svd.subOrderStatus==2">
                                        {{svd.ticketId}} | ￥<span style="color:red">{{svd.ticketSettlePrice}}</span> |
                                        {{svd.playerName}} |
                                        {{svd.dealNum}}票 | 已付款
                                    </el-checkbox>
                                    <el-checkbox :label="svd.id" v-else-if="svd.subOrderStatus==3">
                                        {{svd.ticketId}} | ￥<span style="color:red">{{svd.ticketSettlePrice}}</span> |
                                        {{svd.playerName}} |
                                        {{svd.dealNum}}票 | 已出票
                                    </el-checkbox>
                                    <el-checkbox :label="svd.id" disabled v-else-if="svd.subOrderStatus==4">
                                        {{svd.ticketId}} | ￥<span style="color:red">{{svd.ticketSettlePrice}}</span> |
                                        {{svd.playerName}} |
                                        {{svd.dealNum}}票 | 交易完成
                                    </el-checkbox>
                                    <el-checkbox :label="svd.id" disabled v-else-if="svd.subOrderStatus==5">
                                        {{svd.ticketId}} | ￥<span style="color:red">{{svd.ticketSettlePrice}}</span> |
                                        {{svd.playerName}} |
                                        {{svd.dealNum}}票 | 已结算
                                    </el-checkbox>
                                    <el-checkbox :label="svd.id" disabled v-else-if="svd.subOrderStatus==6">
                                        {{svd.ticketId}} | ￥<span style="color:red">{{svd.ticketSettlePrice}}</span> |
                                        {{svd.playerName}} |
                                        {{svd.dealNum}}票 | 退订申请
                                    </el-checkbox>
                                    <el-checkbox :label="svd.id" disabled v-else-if="svd.subOrderStatus==7">
                                        {{svd.ticketId}} | ￥<span style="color:red">{{svd.ticketSettlePrice}}</span> |
                                        {{svd.playerName}} |
                                        {{svd.dealNum}}票 | 退订审核
                                    </el-checkbox>
                                    <el-checkbox :label="svd.id" disabled v-else-if="svd.subOrderStatus==8">
                                        {{svd.ticketId}} | ￥<span style="color:red">{{svd.ticketSettlePrice}}</span> |
                                        {{svd.playerName}} |
                                        {{svd.dealNum}}票 | 已退订
                                    </el-checkbox>
                                    <el-checkbox :label="svd.id" disabled v-else>
                                        {{svd.ticketId}} | ￥<span style="color:red">{{svd.ticketSettlePrice}}</span> |
                                        {{svd.playerName}} |
                                        {{svd.dealNum}}票 | 取消订单
                                    </el-checkbox>
                                </el-checkbox-group>
                            </p>
                        </div>

                        <div class="bottom clearfix" style="text-align: right;margin-top: 5px">
                               <span v-if="data.salesVoucher.orderStatus==2">
                                    <span style="color:#949494">勾选退订</span>
                                    <el-button type="primary" size="mini"
                                               @click="quit(index,data.salesVoucher.id)">退订</el-button>
                               </span>
                            <span v-if="data.salesVoucher.orderStatus==3">
                                    <span style="color:#949494">勾选退订</span>
                                    <el-button type="primary" size="mini"
                                               @click="quit(index,data.salesVoucher.id)">退订</el-button>
                               </span>
                            <span v-if="data.salesVoucher.orderStatus==1 && data.salesVoucher.payType==4">

                                    <el-button type="primary" size="mini"
                                               @click="payQuery(data.salesVoucher.id)">支付刷新</el-button>
                               </span>
                            <span v-if="data.salesVoucher.orderStatus==1">

                                    <el-button type="primary" size="mini"
                                               @click="cancelOrder(data.salesVoucher.id)">取消订单</el-button>
                               </span>
                            <span v-if="data.salesVoucher.orderStatus==1 && ( data.salesVoucher.payMethod==1||
                            data.salesVoucher.payMethod==3||data.salesVoucher.payMethod==6)">

                                    <el-button type="primary" size="mini"
                                               @click="orderPay(data.salesVoucher.id)">支付</el-button>
                               </span>
                        </div>

                    </div>

                </el-col>

            </el-row>
            <div class="block">
                <el-pagination
                        small
                        background
                        :page-size="5"
                        :pager-count="5"
                        @current-change="handleCurrentChange"
                        layout="total,prev, pager, next"
                        :total="orderTotal">
                </el-pagination>
            </div>
        </el-tab-pane>
        <el-tab-pane label="短信信息">
            <el-row>
                <el-col :span="24" v-for="(date, index) in SmsSendLogList" :offset="index > 0 ? 2 : 0">
                    <!--<div class="Order_box">
                        <el-row>
                            <el-col :span="12">
                                <h3 class="left">单号</h3>
                            </el-col>
                            <el-col :span="12">
                                <h3 class="right"><span style="color:green">2018-12-12</span></h3>
                            </el-col>
                        </el-row>

                        <div class="">
                            <p style="line-height: 25px;">同时，EMUI9还支持无线PC操作</p>
                        </div>
                    </div>-->

                    <div class="aui-order-box">
                        <p class="aui-order-fl aui-order-time">{{date.supplierName}}</p>
                        <p class="aui-order-fl aui-order-address">{{date.sendDate}}</p>
                        <p class="aui-order-fl aui-order-door" v-html="date.smsMessage"></p>
                    </div>
                </el-col>

            </el-row>
            <div class="block">
                <el-pagination
                        small
                        background
                        :pager-count="5"
                        :page-size="5"
                        @current-change="handleCurrentChanged"
                        layout="total,prev, pager, next"
                        :total="msgTotal">
                </el-pagination>
            </div>
        </el-tab-pane>
    </el-tabs>

</div>
</body>
<script>
    var ctxPath = "${ctxPath}";
    var code = '${distributionCode!}';
    //超链接正则表达式
    var regex = /(http|ftp|https:\/\/[\w\-_]+\.{1}[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?/gi;
    var vm = new Vue({
        el: '#app',
        data: {
            checkList: [],
            salesVoucherList: '',
            SmsSendLogList: '',
            numbers: 3,
            orderTotal: 13,
            msgTotal: 0,
            limit: 5,
        },
        computed: { //计算属性
            aDouble: vm => vm.a * 2
        },
        mounted: function () { //初始化数据
            var _this = this;
            //订单信息
            $.ajax({
                type: "post",
                dataType: "json",
                async: false,
                url: ctxPath + "/api/threecode/order/page",
                data: {
                    _method: "post",
                    offset: 0,
                    limit: _this.limit,
                },
                success: function (data) {
                    if (data.code == 1) {
                        _this.salesVoucherList = data.rows;
                        _this.orderTotal = data.total;
                        _this.show();
                    } else {
                        window.location.href = "LogIn.html";
                    }
                }

            });

            //查询短信信息
            $.ajax({
                type: "post",
                dataType: "json",
                async: false,
                url: ctxPath + "/api/threecode/order/getPhoneMsg",
                data: {
                    _method: "post",
                    offset: 0,
                    limit: _this.limit,
                },
                success: function (data) {
                    if (data.code == 1) {
                        //转换链接地址为超链接地址
                        _this.msgTotal = data.total;
                        var mobileMsg = new Array();
                        $.each(data.phoneMsg, function (key, value) {
                            var arr = new Array();
                            arr["smsMessage"] = _this.wrapAnchorTag(value.smsMessage);
                            arr["sendDate"] = value.sendDate;
                            arr["supplierName"] = value.supplierName;
                            mobileMsg[key] = arr;
                        });
                        _this.SmsSendLogList = mobileMsg;
                    }
                }

            })
        },
        methods: { //方法
            plus: function () {
                this.a++
            },
            //支付查询（去支付平台查询支付结果）
            payQuery(value) {
                let _this = this;
                $.confirm({
                    title: '',
                    text: '已付款的游客可主动查询支付状态，若还是没有支付，可能是因为网络繁忙，请耐心等待',
                    onOK: function () {
                        $.ajax({
                            type: "post",
                            dataType: "json",
                            async: false,
                            url: ctxPath + "/fore/order/payQuery",
                            data: {
                                _method: "post",
                                salesVoucherId: value,
                            },
                            success: function (data) {
                                if (data.code == 1) {
                                    _this.$toast("订单已支付成功！");
                                    window.location.reload();
                                } else {
                                    _this.$toast(data.msg);
                                }

                            }

                        })
                    },
                    onCancel: function () {

                    }
                });
            },
            //取消订单
            cancelOrder(value) {
                let _this = this;
                $.ajax({
                    type: "post",
                    dataType: "json",
                    async: false,
                    url: ctxPath + "/fore/order/cancelOrder",
                    data: {
                        _method: "post",
                        salesVoucherId: value,
                    },
                    success: function (data) {
                        if (data.code == 1) {
                            _this.$toast("取消订单成功！");
                            window.location.reload();
                        } else {
                            _this.$toast(data.msg);
                        }

                    }

                })
            },
            //支付
            orderPay(value) {
                let _this = this;
                $.ajax({
                    type: "post",
                    dataType: "json",
                    async: false,
                    url: ctxPath + "/fore/order/orderPay",
                    data: {
                        _method: "post",
                        salesVoucherId: value,
                    },
                    success: function (data) {
                        console.log(data)
                        if (data.returnCode == 0) {
                            // _this.$toast("取消订单成功！");
                            window.location.href = data.payUrl;
                        } else {
                            _this.$toast(data.returnMsg);
                        }

                    }

                })
            },
            //退订
            quit(value, salesVoucherId) {
                let _this = this;

                if (_this.checkList[value].length <= 0) {
                    _this.$toast("请选择子订单！");
                } else {
                    var SalesVoucherDetailId = _this.checkList[value].join(",");

                    $.ajax({
                        type: "post",
                        dataType: "json",
                        async: false,
                        url: ctxPath + "/fore/order/returnTicket",
                        data: {
                            _method: "post",
                            salesVoucherId: salesVoucherId,
                            ids: SalesVoucherDetailId
                        },
                        success: function (data) {
                            if (data.code == 1) {
                                _this.$toast("退订成功！");
                                //setTimeout(_this.number_js,1000);
                                window.location.reload();
                            } else {
                                _this.$toast(data.msg);
                            }

                        }

                    })
                }

            },
            number_js() { //定时器的运行函数

                this.numbers = this.numbers - 1;
                if (this.numbers == 0) {
                    clearTimeout(this.t);
                    this.yanzhengma = '重新获取';
                    this.numbers = 3;
                    window.location.href = "PersonalCenter.html";

                }
            },
            handleCurrentChange(val) {
                var _this = this;
                var num = val - 1;
                //订单信息
                $.ajax({
                    type: "post",
                    dataType: "json",
                    async: false,
                    url: ctxPath + "/api/threecode/order/page",
                    data: {
                        _method: "post",
                        offset: num,
                        limit: _this.limit,
                    },
                    success: function (data) {
                        if (data.code == 1) {
                            _this.salesVoucherList = data.rows;
                            _this.show();
                            $('html, body').animate({scrollTop: 0}, 'slow');
                        } else {
                            window.location.href = "LogIn.html";
                        }
                    }

                });

            },
            handleCurrentChanged(val) {
                let _this = this;
                var num = val - 1;
                //查询短信信息
                $.ajax({
                    type: "post",
                    dataType: "json",
                    async: false,
                    url: ctxPath + "/api/threecode/order/getPhoneMsg",
                    data: {
                        _method: "post",
                        offset: num,
                        limit: _this.limit,
                    },
                    success: function (data) {
                        if (data.code == 1) {
                            //转换链接地址为超链接地址
                            _this.msgTotal = data.total;
                            var mobileMsg = new Array();
                            $.each(data.phoneMsg, function (key, value) {
                                var arr = new Array();
                                arr["smsMessage"] = _this.wrapAnchorTag(value.smsMessage);
                                arr["sendDate"] = value.sendDate;
                                arr["supplierName"] = value.supplierName;
                                mobileMsg[key] = arr;
                                $('html, body').animate({scrollTop: 0}, 'slow');
                            });
                            _this.SmsSendLogList = mobileMsg;
                        } else {
                            //_this.SmsSendLogList = data.phoneMsg;
                            //window.location.href="LogIn.html";
                        }
                    }

                })

            },
            show() {
                for (let key in this.salesVoucherList) {
                    this.$set(this.checkList, key, [])
                }
            },
            //文本自带的链接改为能点击的超链接
            wrapAnchorTag(text) {
                return text.replace(regex, '<a href="$1$2" target="_blank">$1$2</a>');
            },
            exit() {
                if (confirm("确定退出吗")) {
                    var _this = this;
                    $.ajax({
                        type: "post",
                        dataType: "json",
                        async: false,
                        url: ctxPath + "/fore/order/logout",
                        success: function (data) {
                            window.location.href = ctxPath + "/fore/order/jumpPage";
                        }

                    })
                }
                ;

            },
            home() {
                window.location.href = ctxPath + "/fore/index?code=" + code;
            },
        },

    })
</script>

</html>